<template>
    <div class="app-home">
        <div class="app-home-right">
            <!-- 个人信息 -->
            <div class="app-home-user">
                <div>
                    <div class="app-home-user--avatar">
                        <i class="el-icon-user"></i>
                    </div>
                    <div class="app-home-user--username">
                        {{ userInfo.currentUserName }}
                    </div>
                    <div class="app-home-user--token">
                        <i class="el-icon-view visible" @click="visibleToken = !visibleToken"></i>
                        <template v-if="visibleToken">
                            <el-tooltip
                                effect="dark"
                                :content="token"
                                placement="top"
                            >
                                <div class="token">{{ token }}</div>
                            </el-tooltip>
                            
                            <i 
                                class="el-icon-document-copy copy" 
                                v-clipboard:copy="handleCopy(token)"
                                v-clipboard:success="onCopySuccess"
                                v-clipboard:error="onCopyError"
                            ></i>
                        </template>
                    </div>
                </div>
                <div>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        :content="userInfo.currentRoles.join(',') || '-'"
                        placement="top"
                    >
                        <span class="app-home-user--role"
                        >角色：{{
                                userInfo.currentRoles.join(",") || "-"
                            }}</span
                        >
                    </el-tooltip>

                    <el-tooltip
                        class="item"
                        effect="dark"
                        :content="userInfo.currentGroups.join(',') || '-'"
                        placement="top-start"
                    >
                        <span class="app-home-user--group"
                        >所属组：{{
                                userInfo.currentGroups.join(",") || "-"
                            }}</span
                        >
                    </el-tooltip>
                </div>
            </div>
            <!-- 个人控制台 -->
            <div class="app-home-panel">
                <div class="app-home-panel--header">
                    <div class="card-title">个人工作台</div>
                    <div class="refresh" @click="initData">
                        <i :class="{ 'el-icon-loading' : loading, 'el-icon-refresh' : !loading }"></i>{{ lastUpdatedText }}
                    </div>
                </div>
                <div class="app-home-panel--content">
                    <div class="app-home-task">
                        <div
                            class="app-home-task--item"
                            v-for="item in workspace"
                            :key="item.label"
                        >
                            <span class="count">{{ item.value }}</span>
                            <span class="title">{{ item.label }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 菜单 -->
            <div class="app-home-panel">
                <div class="app-home-panel--header">
                    <div class="card-title">菜单</div>
                </div>
                <div class="app-home-panel--content">
                    <div class="app-home-menu">
                        <div class="app-home-menu--item">
                            <span class="icon">
                                <i class="el-icon-time"></i>
                            </span>
                            <span class="title">用户手册</span>
                        </div>

                        <el-popover
                            placement="left-start"
                            title="版本历史"
                            width="450"
                            trigger="click"
                        >
                            <el-table
                                :data="homeInfo.sysVersionList"
                                border
                                style="width: 100%"
                            >
                                <el-table-column
                                    prop="title"
                                    label="名称"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="content"
                                    label="内容"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column prop="createTime" label="日期"></el-table-column>
                            </el-table>
                            <template slot="reference">
                                <div class="app-home-menu--item">
                                    <span class="icon">
                                        <i class="el-icon-time"></i>
                                    </span>
                                    <span class="title">版本历史</span>
                                </div>
                            </template>
                        </el-popover>

                        <div class="app-home-menu--item" @click="onClickContactUs">
                            <span class="icon">
                                <i class="el-icon-time"></i>
                            </span>
                            <span class="title">联系管理员</span>
                        </div>

                        <div class="app-home-menu--item" @click="logout">
                            <span class="icon">
                                <i class="el-icon-time"></i>
                            </span>
                            <span class="title">退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="app-home-carousel">
                <el-carousel height="270px">
                    <el-carousel-item
                        v-for="item in homeInfo.sysCarouselList"
                        :key="item.id"
                        :indicator-position="'none'"
                    >
                        <div
                            class="app-home-carousel--img"
                            :style="{
                                'background-image': `url(${item.imageUrl})`
                            }"
                        ></div>
                        <div class="app-home-carousel--title">
                            {{ item.title }}
                        </div>
                        <div class="app-home-carousel--desc">
                            {{ item.content }}
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="app-home-left">
            <div class="app-home-left--header">
                <div class="app-home-left--intro">
                    <h1>数据开发流程</h1>
                    <div class="desc">
                        中康云数据中台是中康科技的APaaS层平台产品，提供数据采集、数据开发、数据管理、数据分析、数据服务等工具服务，具备完善的医疗大数据方法论建设体系,
                        帮助企业实现一站式数据管理研发与数据仓库搭建,完成数字化转型目标。
                    </div>
                </div>

                <div class="app-home-left--progress">
                    <div class="app-home-progress" v-for="(item, i) in cardList" :key="i">
                        <div class="app-home-progress--step">{{ i + 1}}
                        </div>
                        <div class="app-home-progress--text">{{ item.title }}</div>
                        <div class="app-home-progress--arrow"></div>
                    </div>
                </div>
                <div class="app-home-left--main">
                    <div class="app-home-card" v-for="(item, i) in cardList" :key="i">
                        <div class="app-home-card--img">
                            <img :src="item.image" />
                        </div>
                        <div class="app-home-card--title">{{ item.title }}</div>
                        <div class="app-home-card--desc">{{ item.desc }}</div>
                        <div class="app-home-card--btn">
                            <el-button v-if="!item.enabled" size="mini">敬请期待</el-button>
                            <template v-else>
                                <el-button v-if="item.link" type="primary" size="mini" @click="onClickService(item)">开始使用</el-button>
                                <el-button v-else type="primary" size="mini" @click="onClickContactUs">申请权限</el-button>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app-home-left--footer">
                <div class="card-title">平台服务</div>
                <div class="home-services">
                    <div
                        class="home-services-item"
                        v-for="item in homeInfo.sysPartnershipList"
                        :key="item.id"
                        @click="onClickService(item)"
                    >
                        <div class="home-services-item--img">
                            <i class="iconfont-home" :class="`${item.icon}`" ></i>
                        </div>
                        <div class="home-services-item--content">
                            <h4>{{ item.title }}</h4>
                            <span>{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { getHomeInfo, getUserInfo } from "@/api/system/home";
import { formatTime } from "@/utils"
import { mapGetters } from 'vuex'

export default {
    name: "Home",
    data() {
        return {
            loading: false,
            token: '',
            visibleToken: false,
            userInfo: {
                currentRoles: [],
                currentGroups: []
            },
            homeInfo: {
                sysCarouselList: [],
                sysPartnershipList: [],
                sysVersionList: []
            },
            workspaceMap: {
                currentLoginNum: "登录次数",
                currentDataNum: "数据权限",
                todoNum: "待办任务",
                taskCountNum: "运行任务",
                taskSuccessNum: "运行成功",
                taskFailNum: "运行失败"
            },
            workspace: [],
            cardList: [
                {
                    title: '数据采集',
                    desc: '将不同业务系统中的数据集成至大数据平台中，加速企业数据上云。',
                    link: '',
                    serviceName: '',
                    image: require('@/assets/images/home/1.png'),
                    enabled: false
                },
                {
                    title: '数据开发',
                    desc: '创建数据清洗，加工任务，并编排,将编排后的任务提交、发布至生产环境进行周期调度。',
                    link: '',
                    serviceName: '',
                    image: require('@/assets/images/home/2.png'),
                    enabled: false
                },
                {
                    title: '数据管理',
                    desc: '对发布至生产环境的任务进行统一运维、监控，保障任务稳定运行。',
                    link: '',
                    serviceName: 'DMS',
                    image: require('@/assets/images/home/3.png'),
                    enabled: true
                },
                {
                    title: '数据分析',
                    desc: '对数据加工全流程提供质量监管和校验，及时发现问题数据，减少数据污染。',
                    link: '',
                    serviceName: '',
                    image: require('@/assets/images/home/4.png'),
                    enabled: false
                },
                {
                    title: '数据服务',
                    desc: '将加工、融合后的数据表，快速生成数据API，加快数据流动。',
                    link: '',
                    serviceName: 'Service',
                    image: require('@/assets/images/home/5.png'),
                    enabled: true
                }
            ],
            lastUpdatedText: '',
            lastUpdatedTime: '',
            timer: null,
            lastPathCollcetion: []
        };
    },
    created() {
        this.initData();
    },
    watch: {
        topbarRouters: {
            handler: function (routes) {
                // 校验当前入口下有没有对应的路由，如果冇则说明没有当前模块的权限
                let tmpRoutes = routes.filter(item => !item.hidden)
                this.cardList.map(card => {
                    let obj = tmpRoutes.find(route => {
                        return card.serviceName == route.name
                    })
                    if (obj) {
                        this.lastPathCollcetion = []
                        this.generateLastPath(obj.children)
                        if (this.lastPathCollcetion.length) {
                            let path = this.lastPathCollcetion.join('/')
                            card.link = path
                        }
                    }
                })
            },
            immediate: true
        }
    },
    computed: {
        ...mapGetters(['topbarRouters'])
    },
    methods: {
        generateLastPath(routes) {
            for (let i = 0; i < routes.length; i++) {
                const item = routes[i];
                if (i > 0) break
                this.lastPathCollcetion.push(item.path)
                if (item.children && item.children.length) {
                    this.generateLastPath(item.children.filter(route => !route.hidden))
                }
            }
        },
        async initData() {
            if (this.loading) return
            this.loading = true

            let result = await Promise.all([
                this.getUserInfo(),
                this.getHomeInfo()
            ]);
            this.userInfo = result[0];
            this.homeInfo = result[1];

            let workspace = [];
            for (const key in this.workspaceMap) {
                if (Object.hasOwnProperty.call(this.workspaceMap, key)) {
                    const name = this.workspaceMap[key];
                    let count = 0;
                    if (this.userInfo[key]) count = this.userInfo[key];
                    workspace.push({
                        label: name,
                        value: count
                    });
                }
            }
            this.token = this.userInfo.token
            this.workspace = workspace;
            // TODO V1.1 前端写死
            this.homeInfo.sysCarouselList[0].imageUrl = require('@/assets/images/banner.png')

            this.lastUpdatedTime = new Date().getTime()

            this.formatLatUpdatedTime()

            this.loading = false
        },
        formatLatUpdatedTime() {
            this.clearInterval()
            this.timer = setInterval(() => {
                this.lastUpdatedText = formatTime(this.lastUpdatedTime)
            }, 1000);
        },
        clearInterval() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        getHomeInfo() {
            return new Promise((resolve, reject) => {
                getHomeInfo()
                    .then(res => {
                        resolve(res.data);
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },
        getUserInfo() {
            return new Promise((resolve, reject) => {
                getUserInfo()
                    .then(res => {
                        resolve(res.data);
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },
        async logout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = '/';
                })
            })
        },
        onClickService(item) {
            if (item.link.indexOf("http://") !== -1 || item.link.indexOf("https://") !== -1) {
                window.open(item.link, "_blank");
            } else {
                this.$router.push(item.link)
            }
        },
        onClickContactUs() {
            this.$alert('请联系管理员： ' +
                '数据中台--罗银忠', '联系管理员', {
                confirmButtonText: '确定',
            });
        },
        handleCopy(token) {
            return token
        },
        onCopySuccess() {
            this.msgSuccess('复制成功')
        },
        onCopyError() {
            this.msgError('复制失败！')
        }
    },
    beforeDestroy() {
        this.clearInterval()
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/fonts/home-icon/iconfont.css";
.app-main{

    margin-top: 10px!important;

}
.app-home {
    //margin: 0 10px 10px 10px;
    padding: 0 10px;
    color: #5A5A5A;
    display: flex;
    user-select: none;

    .card-title {
        border-left: 4px solid #1183f8;
        padding-left: 10px;
        line-height: 16px;
        height: 16px;
        font-weight: 400;
        font-size: 16px;
        margin: 0 0 12px 0;
    }

    // & > div {
    //     min-height: calc(100vh - 144px);
    // }

    &-left {
        flex: 1;
        margin-left: 20px;
        & > div:first-child {
            margin-bottom: 10px;
        }

        &--header,
        &--footer {
            padding: 20px 20px 10px;
            background: #fff;
        }

        &--intro {
            display: flex;
            align-items: flex-start;

            h1 {
                margin: 0;
                width: 304px;
                height: 46px;
                line-height: 46px;
                font-size: 46px;
                font-weight: 600;
                letter-spacing: 2px;
                position: relative;
                flex-shrink: 0;

                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: -45px;
                    height: 46px;
                    border-left: 1px solid #c8c8c8;
                }
            }

            .desc {
                flex: 1;
                max-width: 835px;
                font-size: 16px;
                line-height: 26px;
                margin-left: 90px;
            }
        }

        &--progress {
            margin: 60px 0 25px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &--main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
        }
    }

    &-progress {
        width: 260px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &--step {
            width: 26px;
            height: 26px;
            line-height: 26px;
            background: #FFFFFF;
            border: 1px solid #C8C8C8;
            border-radius: 50%;
            font-size: 18px;
            text-align: center;
            margin-right: 14px;
        }

        &--text {
            font-size: 16px;
            font-weight: 400;
            color: #1E1E1E;
            line-height: 26px;
        }

        &--arrow {
            width: 95px;
            border-bottom: 2px dashed #7F7F7F;
            position: absolute;
            top: 50%;
            right: -45px;
            transform: translateY(-50%);

            &::before {
                content: '';
                position: absolute;
                top: -3px;
                left: -8px;
                width: 8px;
                height: 8px;
                background: #FFFFFF;
                border: 1px solid #7F7F7F;
                border-radius: 50%;
            }

            &::after {
                content: '';
                position: absolute;
                top: -6px;
                right: -13px;
                @include triangle(13px, 13px, #7A7A7A, 'right');
            }

        }

        &:last-child {
            .app-home-progress--arrow {
                display: none;
            }
        }
    }

    &-card {
        width: 260px;
        height: 445px;
        padding: 20px 35px 50px;
        border: 1px solid #dadada;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 6px 0 rgb(0 0 0 / 5%);

        &--img {
            /* width: 116px;
            height: 125px;
            margin-bottom: 45px; */

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        &--title {
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            font-weight: bold;
            color: #1d1d1d;
        }

        &--desc {
            height: 78px;
            font-size: 14px;
            line-height: 26px;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        &--btn {
            width: 96px;
        }
    }

    &-right {
        width: 400px;
        padding: 20px;
        flex-shrink: 0;
        background: #fff;

        & > div {
            width: 100%;
        }
    }

    &-user {
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        color: #1e1e1e;

        & > div:first-child {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        & > div:last-child {
            & > span {
                display: inline-block;
                vertical-align: middle;
            }
        }

        &--avatar {
            width: 30px;
            height: 30px;
            margin-right: 12px;
            border: 1px solid #1e1e1e;
            border-radius: 50%;
            position: relative;

            i {
                font-size: 24px;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        &--username {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        &--role {
            margin-right: 50px;
            width: 130px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        &--group {
            max-width: 180px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        &--token {
            display: flex;
            align-items: center;

            .visible,
            .copy {
                margin: 0 8px;
            }
            .token {
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    &-panel {
        padding: 22px 0;
        border-top: 1px solid #f0f0f0;

        &--header {
            display: flex;
            justify-content: space-between;
            line-height: 16px;
            margin-bottom: 16px;

            .card-title {
                margin: 0;
            }

            .refresh {
                font-size: 12px;
                color: #969696;
                display: flex;
                align-items: center;
                cursor: pointer;

                i {
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
        }
    }

    &-task {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 220px;
        grid-gap: 10px;
        margin: auto;

        &--item {
            width: 100%;
            padding: 0 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            .count {
                width: 100%;
                height: 20px;
                margin-top: 10px;
                font-size: 24px;
                font-weight: bold;
            }

            .title {
                font-size: 14px;
                color: #1e1e1e;
                margin-bottom: 10px;
            }
        }
    }

    &-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 10px;
        margin: auto;

        &--item {
            width: 100%;
            font-size: 14px;
            color: #1e1e1e;
            display: flex;
            align-items: center;
            cursor: pointer;

            .icon {
                margin-right: 5px;

                i {
                    font-size: 20px;
                }
            }
        }
    }

    &-carousel {
        padding-top: 20px;
        color: #1e1e1e;
        border-top: 1px solid #f0f0f0;

        &--img {
            width: 100%;
            height: 185px;
            background-size: cover;
            background-position: center;
        }

        &--title {
            margin: 15px 0 10px;
            font-size: 16px;
            line-height: 17px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        &--desc {
            font-size: 12px;
            line-height: 20px;
            color: #5A5A5A;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        ::v-deep {
            .el-carousel__indicators--horizontal {
                display: none;
            }
        }
    }

    .home-services {
        // max-width: calc(100vw - 560px);
        // overflow-x: scroll;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 10px;

        &-item {
            width: 342px;
            height: 60px;
            padding: 5px;
            background: #fafafa;
            flex-shrink: 0;
            display: flex;
            cursor: pointer;

            &--img {
                width: 50px;
                height: 50px;
                margin-right: 5px;
                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont-home {
                    color: #1070ed;
                    font-size: 32px;
                }
            }

            &--content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;

                h4 {
                    margin: 0 0 4px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #1e1e1e;
                }

                span {
                    font-size: 14px;
                    line-height: 20px;
                    width: 250px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>
